<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../jquery.min.js"></script>
    <script>
      $(function () {
        // 隐藏的属性（dom对象身上）拿不到
        const checked = $('[name=false]:first-of-type').data('checked')
        console.log(checked, 'checked')

        // 自带的属性拿不到
        const name = $('[name=false]:first-of-type').data('name')
        console.log(name, 'name')

        // 自定义的属性拿不到
        const abc = $('[name=false]:first-of-type').data('abc')
        console.log(abc, 'abc')

        // 一次性获取所有以 data- 开头的自定义属性，组成一个对象（键没有 data- 了）
        const data = $('[name=false]:first-of-type').data()
        console.log(data, 'data')

        // 这个拿不到
        const id = $('[name=false]:first-of-type').data('data-id')
        console.log(id, 'id')
        // 不能加 data- 前缀
        const id2 = $('[name=false]:first-of-type').data('id')
        console.log(id2, 'id2')
      })
    </script>
  </head>
  <body>
    <div id="app">
      性别：
      <label>
        <input
          type="radio"
          name="false"
          abc="xxx"
          data-id="123"
          data-age="18"
          data-name="张三"
          data-ok="true"
        />
        男
      </label>
      <label><input type="radio" name="false" /> 女</label>
    </div>
  </body>
</html>
